import { Button, Card, Input, Form, InputNumber, Radio, Empty, Checkbox, Tooltip, message, Affix, Row, Col, Avatar, Table, Tag } from 'antd';
import { connect, history } from 'umi';
import React, { useEffect, useState } from 'react';
import {
  DownSquareFilled,
  UpSquareFilled,
  CloseSquareFilled
} from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './style.less';
import db from '@/utils/localstorage';
import { addVipCard } from './service';
import SearchForm from './searchForm'

const FormItem = Form.Item;

const imgs = ['http://mmm.supercube.vip/ck.png', 'http://mmm.supercube.vip/cz.png', 'http://mmm.supercube.vip/qika.png']
const fortmatText = (courseType, category) => {
  let catalogues = [];
  if (db.get("dictTypeList")) {
    if (courseType == '3') {
      catalogues = db.get("dictTypeList")["private_course_catalogue"]
    } else {
      catalogues = db.get("dictTypeList")["group_course_catalogue"]
    }
    let result = catalogues.filter((item) => {
      if (item.value == category) {
        return item
      }
    })
    return Array.isArray(result) && result.length > 0 ? result[0].label : ""
  }
  return "";
}
let vipCardTemp = {}
const BasicForm = props => {
  const { submitting, dispatch, shopOptionList, vipCard, cloneVipCard } = props;
  const [form] = Form.useForm();
  const [setting, setSetting] = useState(false);
  const [singlePlan, setSinglePlan] = useState(false);
  const [groupPlan, setGroupPlan] = useState(false);
  const [smallGroupPlan, setSmallGroupPlan] = useState(false);
  const [equipmentGroupPlan, setEquipmentGroupPlan] = useState(false);

  const [smallClassKeys, setSmallClassKeys] = useState([]);
  const [bigClassKeys, setBigClassKeys] = useState([]);
  const [privateClassKeys, setPrivateClassKeys] = useState([]);
  const [equipmentClassKeys, setEquipmentClassKeys] = useState([]);

  const [smallClassValue, setSmallClassValue] = useState("");
  const [bigClassValue, setBigClassValue] = useState("");
  const [equipmentClassValue, setEquipmentClassValue] = useState("");
  const [privateClassValueOne2One, setPrivateClassValueOne2One] = useState("");
  const [privateClassValueOne2Two, setPrivateClassValueOne2Two] = useState("");
  // const [privateClassValueOne2Three, setPrivateClassValueOne2Three] = useState("");

  const [smallClassSingleValue, setSmallClassSingleValue] = useState({});
  const [equipmentClassSingleValue, setEquipmentClassSingleValue] = useState({});
  const [bigClassSingleValue, setBigClassSingleValue] = useState({});
  const [privateClassSingleValueOne2One, setPrivateClassSingleValueOne2One] = useState({});
  const [privateClassSingleValueOne2Two, setPrivateClassSingleValueOne2Two] = useState({});
  // const [privateClassSingleValueOne2Three, setPrivateClassSingleValueOne2Three] = useState({});

  //储值卡类型
  const [cardType, setCardType] = useState("");
  const venueId = db.get("venue").id;
  /**
   * 大班课统一设置价格
   */
  const bigClassSetting = value => {
    setBigClassSingleValue({})
    setBigClassValue(value)
  }

  /**
   * 大班课单个设置价格
   * @param {*} value 
   */
  const bigSingleClassSetting = (value, record) => {
    let _bigClassSingleValue = { ...bigClassSingleValue }
    _bigClassSingleValue[record.courseId] = value
    setBigClassSingleValue(_bigClassSingleValue)
  }

  /**
   * 小班课统一设置价格
   */
  const smallClassSetting = (value, record) => {
    setSmallClassSingleValue({})
    setSmallClassValue(value)
  }

  const equipmentClassSetting = (value, record) => {
    setEquipmentClassSingleValue({})
    setEquipmentClassValue(value)
  }

  /**
   * 小班课单个设置价格
   * @param {*} value 
   * @param {*} record 
   */
  const smallSingleClassSetting = (value, record) => {
    let _smallClassSingleValue = { ...smallClassSingleValue }
    _smallClassSingleValue[record.courseId] = value
    setSmallClassSingleValue(_smallClassSingleValue)
  }

  const equipmentSingleClassSetting = (value, record) => {
    let _equipmentClassSingleValue = { ...equipmentClassSingleValue }
    _equipmentClassSingleValue[record.courseId] = value
    setSmallClassSingleValue(_equipmentClassSingleValue)
  }



  /**
  *  私教课1v1统一设置价格
  */
  const privateClassOne2OneSetting = (value, record) => {
    setPrivateClassSingleValueOne2One({})
    setPrivateClassValueOne2One(value)
  }

  /**
  *  私教课1v2统一设置价格
  */
  const privateClassOne2TwoSetting = (value, record) => {
    setPrivateClassSingleValueOne2Two({})
    setPrivateClassValueOne2Two(value)
  }

  /**
  *  私教课1v3统一设置价格
  */
  // const privateClassOne2ThreeSetting = (value,record)  =>{
  //   setPrivateClassSingleValueOne2Three({})
  //   setPrivateClassValueOne2Three(value)
  // }

  /**
   * 私教课1v1单个设置价格
   * @param {*} value 
   * @param {*} record 
   */
  const privateSingleOne2OneClassSetting = (value, record) => {
    let _privateClassSingleValueOne2One = { ...privateClassSingleValueOne2One }
    _privateClassSingleValueOne2One[record.courseId] = value
    setPrivateClassSingleValueOne2One(_privateClassSingleValueOne2One)
  }

  /**
   * 私教课1v1单个设置价格
   * @param {*} value 
   * @param {*} record 
   */
  const privateSingleOne2TwoClassSetting = (value, record) => {
    let _privateClassSingleValueOne2Two = { ...privateClassSingleValueOne2Two }
    _privateClassSingleValueOne2Two[record.courseId] = value
    setPrivateClassSingleValueOne2Two(_privateClassSingleValueOne2Two)
  }

  /**
   * 私教课1v1单个设置价格
   * @param {*} value 
   * @param {*} record 
   */
  // const privateSingleOne2ThreeClassSetting = (value,record) =>{
  //   let _privateClassSingleValueOne2Three={...privateClassSingleValueOne2Three}
  //   _privateClassSingleValueOne2Three[record.courseId]=value
  //   setPrivateClassSingleValueOne2Three(_privateClassSingleValueOne2Three)
  // }

  const bigClasscolumns = [
    {
      title: '课程名称',
      dataIndex: 'courseName',
      render: text => <><Tag color="blue">大班</Tag><span>{text}</span></>
    },
    {
      title: '大班',
      dataIndex: 'type',
      render: text => <span>大班</span>
    },
    {
      title: '课程类型',
      dataIndex: 'category',
      render: (text, record) => <span>{fortmatText('1', text)}</span>
    },
    {
      title: <><span>&nbsp;&nbsp;&nbsp;统一设置</span>&nbsp;&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={bigClassSetting} />&nbsp;&nbsp;元/人</>,
      dataIndex: 'costPerClassPersonGroup',
      render: (text, record) => <><span>每节课收费</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={value => bigSingleClassSetting(value, record)} value={bigClassSingleValue[record.courseId] || bigClassValue} />&nbsp;&nbsp;元/人</>
    },
  ];
  const smallClasscolumns = [
    {
      title: '课程名称',
      dataIndex: 'courseName',
      render: text => <><Tag color="blue">小班</Tag><span>{text}</span></>
    },
    {
      title: '小班',
      dataIndex: 'type',
      render: text => <span>小班</span>
    },
    {
      title: '课程类型',
      dataIndex: 'category',
      render: (text, record) => <span>{fortmatText('1', text)}</span>
    },
    {
      title: <><span>&nbsp;&nbsp;&nbsp;统一设置</span>&nbsp;&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={smallClassSetting} />&nbsp;&nbsp;元/人</>,
      dataIndex: 'costPerClassPersonGroup',
      render: (text, record) => <><span>每节课收费</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={value => smallSingleClassSetting(value, record)} value={smallClassSingleValue[record.courseId] || smallClassValue} />&nbsp;&nbsp;元/人</>
    },
  ];

  const equipmentClasscolumns = [
    {
      title: '课程名称',
      dataIndex: 'courseName',
      render: text => <><Tag color="blue">小班</Tag><span>{text}</span></>
    },
    {
      title: '小班',
      dataIndex: 'type',
      render: text => <span>小班</span>
    },
    {
      title: '课程类型',
      dataIndex: 'category',
      render: (text, record) => <span>{fortmatText('1', text)}</span>
    },
    {
      title: <><span>&nbsp;&nbsp;&nbsp;统一设置</span>&nbsp;&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={equipmentClassSetting} />&nbsp;&nbsp;元/人</>,
      dataIndex: 'costPerClassPersonGroup',
      render: (text, record) => <><span>每节课收费</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={value => equipmentSingleClassSetting(value, record)} value={equipmentClassSingleValue[record.courseId] || equipmentClassValue} />&nbsp;&nbsp;元/人</>
    },
  ];
  const privateClasscolumns = [
    {
      title: '课程名称',
      dataIndex: 'courseName',
      render: text => <><Tag color="blue">私教</Tag><span>{text}</span></>
    },
    {
      title: '私教',
      dataIndex: 'type',
      render: text => <span>私教</span>
    },
    {
      title: '课程类型',
      dataIndex: 'category',
      render: (text, record) => <span>{fortmatText('3', text)}</span>
    },
    {
      title: <><span>每节课收费</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={privateClassOne2OneSetting} />&nbsp;&nbsp;元/人</>,
      dataIndex: 'costPerClassPerson1to1',
      render: (text, record) => <><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        1对1</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={value => privateSingleOne2OneClassSetting(value, record)} value={privateClassSingleValueOne2One[record.courseId] || privateClassValueOne2One} />&nbsp;&nbsp;元/人</>
    },
    {
      title: <><span>每节课收费</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={privateClassOne2TwoSetting} />&nbsp;&nbsp;元/人</>,
      dataIndex: 'costPerClassPerson1to2',
      render: (text, record) => <><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        1对2</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={value => privateSingleOne2TwoClassSetting(value, record)} value={privateClassSingleValueOne2Two[record.courseId] || privateClassValueOne2Two} />&nbsp;&nbsp;元/人</>
    },
    // {
    //   title: <><span>每节课收费</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={privateClassOne2ThreeSetting}/>&nbsp;&nbsp;元/人</>,
    //   dataIndex: 'costPerClassPerson1to3',
    //   render: (text,record) => <><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    //     1对3</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={value=>privateSingleOne2ThreeClassSetting(value,record)} value={privateClassSingleValueOne2Three[record.courseId]||privateClassValueOne2Three}/>&nbsp;&nbsp;元/人</>
    // },
  ];

  useEffect(() => {
    if (dispatch) {
      dispatch({
        type: 'cubeVipCard/fetchShopList',
        payload: {
          userId: db.get("user").userId
        }
      })
      dispatch({
        type: 'cubeVipCard/fetchVipCard',
        payload: {}
      }).then((result) => {
        vipCardTemp = result
        //修改 cardType state的值
        if (result.smallClassCoursesSupportedCardVOS) {
          let smallClassKeys = [];
          result.smallClassCoursesSupportedCardVOS.map((item) => {
            if (item.id) {
              smallClassKeys.push(item.courseId)
            }
          })
          setSmallClassKeys(smallClassKeys)
        }

        if (result.equipmentClassCoursesSupportedCardVOS) {
          let equipmentClassKeys = [];
          result.equipmentClassCoursesSupportedCardVOS.map((item) => {
            if (item.id) {
              equipmentClassKeys.push(item.courseId)
            }
          })
          setEquipmentClassKeys(equipmentClassKeys)
        }

        if (result.manyClassCoursesSupportedCardVOS) {
          let bigClassKeys = [];
          result.manyClassCoursesSupportedCardVOS.map((item) => {
            if (item.id) {
              bigClassKeys.push(item.courseId)
            }
          })
          setBigClassKeys(bigClassKeys)
        }
        if (result.privateClassCoursesSupportedCardVOS) {
          let privateClassKeys = [];
          result.privateClassCoursesSupportedCardVOS.map((item) => {
            if (item.id) {
              privateClassKeys.push(item.courseId)
            }
          })
          setSmallClassKeys(privateClassKeys)
        }

      })
    }
  }, []);
  const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 7,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 12,
      },
      md: {
        span: 10,
      },
    },
  };
  const submitFormLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 10,
        offset: 7,
      },
    },
  };

  //处理课程支持的会员卡
  const formatCourseCard = () => {
    let coursesSupportedCardDTOS = []
    if (privateClassKeys && privateClassKeys.length > 0) {
      privateClassKeys.map((item) => {
        let coursesSupportedCardDTO = {
          courseId: item
        }
        if (privateClassSingleValueOne2One) {
          if (privateClassSingleValueOne2One[item]) {
            coursesSupportedCardDTO['costPerClassPerson1to1'] = privateClassSingleValueOne2One[item]
          } else if (privateClassValueOne2One) {
            coursesSupportedCardDTO['costPerClassPerson1to1'] = privateClassValueOne2One
          }
        } else if (privateClassValueOne2One) {
          coursesSupportedCardDTO['costPerClassPerson1to1'] = privateClassValueOne2One
        }

        if (privateClassSingleValueOne2Two) {
          if (privateClassSingleValueOne2Two[item]) {
            coursesSupportedCardDTO['costPerClassPerson1to2'] = privateClassSingleValueOne2Two[item]
          } else if (privateClassValueOne2Two) {
            coursesSupportedCardDTO['costPerClassPerson1to2'] = privateClassValueOne2Two
          }
        } else if (privateClassValueOne2Two) {
          coursesSupportedCardDTO['costPerClassPerson1to2'] = privateClassValueOne2Two
        }

        // if(privateClassSingleValueOne2Three){
        //   if(privateClassSingleValueOne2Three[item]){
        //     coursesSupportedCardDTO['costPerClassPerson1to3']=privateClassSingleValueOne2Three[item]
        //   }else if(privateClassValueOne2Three){
        //     coursesSupportedCardDTO['costPerClassPerson1to3']=privateClassValueOne2Three
        //   }
        // }else if(privateClassValueOne2Three){
        //   coursesSupportedCardDTO['costPerClassPerson1to3']=privateClassValueOne2Three
        // }
        coursesSupportedCardDTOS.push(coursesSupportedCardDTO);
      })
    }
    if (smallClassKeys && smallClassKeys.length > 0) {
      smallClassKeys.map((item) => {
        let coursesSupportedCardDTO = {
          courseId: item
        }
        if (smallClassSingleValue) {
          if (smallClassSingleValue[item]) {
            coursesSupportedCardDTO['costPerClassPersonGroup'] = smallClassSingleValue[item]
          } else if (smallClassValue) {
            coursesSupportedCardDTO['costPerClassPersonGroup'] = smallClassValue
          }
        } else if (smallClassValue) {
          coursesSupportedCardDTO['costPerClassPersonGroup'] = smallClassValue
        }
        coursesSupportedCardDTOS.push(coursesSupportedCardDTO);
      })
    }

    if (equipmentClassKeys && equipmentClassKeys.length > 0) {
      equipmentClassKeys.map((item) => {
        let coursesSupportedCardDTO = {
          courseId: item
        }
        if (equipmentClassSingleValue) {
          if (equipmentClassSingleValue[item]) {
            coursesSupportedCardDTO['costPerClassPersonGroup'] = equipmentClassSingleValue[item]
          } else if (equipmentClassValue) {
            coursesSupportedCardDTO['costPerClassPersonGroup'] = equipmentClassValue
          }
        } else if (equipmentClassValue) {
          coursesSupportedCardDTO['costPerClassPersonGroup'] = equipmentClassValue
        }
        coursesSupportedCardDTOS.push(coursesSupportedCardDTO);
      })
    }


    if (bigClassKeys && bigClassKeys.length > 0) {
      bigClassKeys.map((item) => {
        let coursesSupportedCardDTO = {
          courseId: item
        }
        if (bigClassSingleValue) {
          if (bigClassSingleValue[item]) {
            coursesSupportedCardDTO['costPerClassPersonGroup'] = bigClassSingleValue[item]
          } else if (bigClassValue) {
            coursesSupportedCardDTO['costPerClassPersonGroup'] = bigClassValue
          }
        } else if (bigClassValue) {
          coursesSupportedCardDTO['costPerClassPersonGroup'] = bigClassValue
        }
        coursesSupportedCardDTOS.push(coursesSupportedCardDTO);
      })
    }
    return coursesSupportedCardDTOS;
  }

  /**
   * 提交表单
   * @param {*} values 
   */
  const onFinish = async () => {
    const hide = message.loading('正在保存');
    const values = await form.validateFields();
    try {
      let coursesSupportedCardDTOS = formatCourseCard()
      values.coursesSupportedCardDTOS = coursesSupportedCardDTOS;
      //如果当前不在场馆内，则自动添加场馆为当前场馆
      if(venueId !== '101'){
        values.cardSupportVenuesDTOS = [venueId];
      }
      let result = await addVipCard({ ...values });
      hide();
      if (result.code === 0) {
        message.success('保存成功');
        history.push(`/vip/card`)
        return true;
      } else {
        message.error(result.message);
        return false;
      }
    } catch (error) {
      hide();
      message.error('保存失败，请重试');
      return false;
    }
  };


  /**
   * 显示隐藏高级设置
   */
  const toggle = () => {
    setSetting(!setting)
  }

  /**
   * 显示隐藏私教排班
   */
  const toggleSinglePlan = () => {
    setSinglePlan(!singlePlan)
  }

  /**
   * 显示隐藏团课排期
   */
  const toggleGroupPlan = () => {
    setGroupPlan(!groupPlan)
  }

  /**
 * 显示隐藏小班排期
 */
  const toggleSmallGroupPlan = () => {
    setSmallGroupPlan(!smallGroupPlan)
  }

  const toggleEquipmentGroupPlan = () => {
    setEquipmentGroupPlan(!equipmentGroupPlan)
  }

  /**
   * 修改会员卡类型
   */
  const onChange = (e) => {
    setCardType(e.target.value)
    //切换之后重置之前新增
    form.setFieldsValue({
      settingPriceGradientDTOS: []
    })
    //体验卡不允许转让
    if (e.target.value === '4') {
      form.setFieldsValue({
        cardTransferSettingsDTO: {
          isSupport: '1',
          poundage: ''
        }
      })
    }
  }

  /**
   * 更改选中的课程
   */
  const selectCoursesSupportedCardDTOS = (record, selected, type) => {

  }

  const changeCoursesSupportedCardDTOS = (selectedRowKeys, type) => {
    if (type == 'private') {
      setPrivateClassKeys(selectedRowKeys)
    } else if (type == 'big') {
      setBigClassKeys(selectedRowKeys)
    } else if (type == 'small') {
      setSmallClassKeys(selectedRowKeys)
    }else if(type == 'equipment'){
      setEquipmentClassKeys(selectedRowKeys)
    }
  }

  const _search = (courseType, values) => {
    let _vipCard = { ...cloneVipCard };
    if (courseType == '3') {
      let _privateClassCoursesSupportedCardVOS = vipCardTemp.privateClassCoursesSupportedCardVOS
      if (values.courseName) {
        _privateClassCoursesSupportedCardVOS = _privateClassCoursesSupportedCardVOS.filter((item) => {
          if (item.courseName.indexOf(values.courseName) > -1) {
            return item
          }
        })
      }
      if (values.category) {
        _privateClassCoursesSupportedCardVOS = _privateClassCoursesSupportedCardVOS.filter((item) => {
          if (item.category == values.category) {
            return item
          }
        })
      }
      _vipCard.privateClassCoursesSupportedCardVOS = _privateClassCoursesSupportedCardVOS
      dispatch({
        type: 'cubeVipCard/common',
        payload: {
          vipCard: { ..._vipCard }
        }
      })
    } else if (courseType == '2') {
      let _manyClassCoursesSupportedCardVOS = vipCardTemp.manyClassCoursesSupportedCardVOS
      if (values.courseName) {
        _manyClassCoursesSupportedCardVOS = _manyClassCoursesSupportedCardVOS.filter((item) => {
          if (item.courseName.indexOf(values.courseName) > -1) {
            return item
          }
        })
      }
      if (values.category) {
        _manyClassCoursesSupportedCardVOS = _manyClassCoursesSupportedCardVOS.filter((item) => {
          if (item.category == values.category) {
            return item
          }
        })
      }
      _vipCard.manyClassCoursesSupportedCardVOS = _manyClassCoursesSupportedCardVOS
      dispatch({
        type: 'cubeVipCard/common',
        payload: {
          vipCard: { ..._vipCard }
        }
      })
    } else if (courseType == '1') {
      let _smallClassCoursesSupportedCardVOS = vipCardTemp.smallClassCoursesSupportedCardVOS
      if (values.courseName) {
        _smallClassCoursesSupportedCardVOS = _smallClassCoursesSupportedCardVOS.filter((item) => {
          if (item.courseName.indexOf(values.courseName) > -1) {
            return item
          }
        })
      }
      if (values.category) {
        _smallClassCoursesSupportedCardVOS = _smallClassCoursesSupportedCardVOS.filter((item) => {
          if (item.category == values.category) {
            return item
          }
        })
      }
      _vipCard.smallClassCoursesSupportedCardVOS = _smallClassCoursesSupportedCardVOS
      dispatch({
        type: 'cubeVipCard/common',
        payload: {
          vipCard: { ..._vipCard }
        }
      })
    } else if (courseType == '4') {
      let _equipmentClassCoursesSupportedCardVOS = vipCardTemp.equipmentClassCoursesSupportedCardVOS
      if (values.courseName) {
        _equipmentClassCoursesSupportedCardVOS = _equipmentClassCoursesSupportedCardVOS.filter((item) => {
          if (item.courseName.indexOf(values.courseName) > -1) {
            return item
          }
        })
      }
      if (values.category) {
        _equipmentClassCoursesSupportedCardVOS = _equipmentClassCoursesSupportedCardVOS.filter((item) => {
          if (item.category == values.category) {
            return item
          }
        })
      }
      _vipCard.equipmentClassCoursesSupportedCardVOS = _equipmentClassCoursesSupportedCardVOS
      dispatch({
        type: 'cubeVipCard/common',
        payload: {
          vipCard: { ..._vipCard }
        }
      })
    }
  }

  return (
    <PageHeaderWrapper className={styles.saveVip}>
      <Form
        style={{
          marginTop: 8,
        }}
        form={form}
        name="basic"
        initialValues={{cardTransferSettingsDTO:{
          isSupport:'1',
        },
        cardSuperSettingsDTO:{
          isFirstClassOpenCard:'1',
          isExperienceCard:'2'
        }}}
      >
        <Card
          title="会员卡信息"
          style={{
            marginBottom: 24,
          }}
          bordered={false}>
          <FormItem
            {...formItemLayout}
            label="会员卡名称"
            name="cardName"
            rules={[
              {
                required: true,
                message: '请输入会员卡名称',
              },
            ]}
          >
            <Input placeholder="请输入" />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="会员卡类型"
            name="cardType"
            rules={[
              {
                required: true,
                message: '请选择会员卡类型',
              },
            ]}
          >
            <Radio.Group onChange={onChange}>
              {
                db.get("dictTypeList") && db.get("dictTypeList")["member_card_type"].map((item, index) => {
                  return <Radio value={item.value} key={index}>{item.label}</Radio>
                })
              }
            </Radio.Group>
          </FormItem>
          {
            venueId === '101' && (
              <FormItem
                {...formItemLayout}
                label="支持场馆"
                name="cardSupportVenuesDTOS"
                rules={[
                  {
                    required: true,
                    message: '请勾选场馆',
                  },
                ]}
              >
                <Checkbox.Group options={shopOptionList} />
              </FormItem>
            )
          }
        </Card>
        <Card
          title="设置价格"
          style={{
            marginBottom: 24,
          }}
          bordered={false}
        >
          {
            !cardType && <Empty />
          }
          {
            cardType == "1" && <Form.List name="settingPriceGradientDTOS">
              {(fields, { add, remove }) => {
                return (
                  <div>
                    {fields.map((field, index) => (
                      <Row key={field.key}>
                        <Col span={5}>
                          <Form.Item
                            label="储值金额"
                            name={[field.name, "storedValueAmount"]}
                            fieldKey={[field.fieldKey, "storedValueAmount"]}
                          >
                            <InputNumber
                              min={0}
                              formatter={value => `${value}元`}
                              parser={value => value.replace('元', '')}
                            />
                          </Form.Item>
                        </Col>
                        <Col span={5}>
                          <Form.Item
                            label="原价"
                            name={[field.name, "originalPrice"]}
                            fieldKey={[field.fieldKey, "originalPrice"]}
                          >
                            <InputNumber
                              min={0}
                              formatter={value => `${value}元`}
                              parser={value => value.replace('元', '')}
                            />
                          </Form.Item>
                        </Col>
                        <Col span={5}>
                          <Form.Item
                            label="售价"
                            name={[field.name, "sellingPrice"]}
                            fieldKey={[field.fieldKey, "sellingPrice"]}
                          >
                            <InputNumber
                              min={0}
                              formatter={value => `${value}元`}
                              parser={value => value.replace('元', '')}
                            />
                          </Form.Item>
                        </Col>
                        <Col span={5}>
                          <Form.Item
                            label="有效期"
                            name={[field.name, "periodValidity"]}
                            fieldKey={[field.fieldKey, "periodValidity"]}
                          >
                            <InputNumber style={{ width: '90px' }} suffix="天" />
                          </Form.Item>
                        </Col>
                        <Col flex="none" span={4}>
                          <Button icon={<CloseSquareFilled />} onClick={() => { remove(field.name) }}>
                            删除
                          </Button>
                        </Col>
                      </Row>
                    ))}
                    <Form.Item>
                      <Button
                        type="dashed"
                        onClick={() => {
                          add();
                        }}
                        style={{ width: "100%" }}
                      >
                        新增
                      </Button>
                    </Form.Item>
                  </div>
                );
              }}
            </Form.List>
          }
          {
            (cardType == "2" || cardType == "4") && <Form.List name="settingPriceGradientDTOS">
              {(fields, { add, remove }) => {
                return (
                  <div>
                    {fields.map((field, index) => (
                      <Row key={field.key}>
                        {/* <Col span={4}>
                          <Form.Item
                            label="私教次数"
                            name={[field.name, "numberPrivateTeaching"]}
                            fieldKey={[field.fieldKey, "numberPrivateTeaching"]}
                          >
                            <InputNumber
                              min={0}
                              formatter={value => `${value}次`}
                              parser={value => value.replace('次', '')}
                            />
                          </Form.Item>
                        </Col> */}
                        <Col span={4}>
                          <Form.Item
                            label="次数"
                            name={[field.name, "numberGroupLessons"]}
                            fieldKey={[field.fieldKey, "numberGroupLessons"]}
                          >
                            <InputNumber
                              min={0}
                              formatter={value => `${value}次`}
                              parser={value => value.replace('次', '')}
                            />
                          </Form.Item>
                        </Col>
                        {/* <Col span={4}>
                          <Form.Item
                            label="小班次数"
                            name={[field.name, "numberSmallClasses"]}
                            fieldKey={[field.fieldKey, "numberSmallClasses"]}
                          >
                            <InputNumber
                              min={0}
                              formatter={value => `${value}次`}
                              parser={value => value.replace('次', '')}
                            />
                          </Form.Item>
                        </Col> */}
                        <Col span={3}>
                          <Form.Item
                            label="原价"
                            name={[field.name, "originalPrice"]}
                            fieldKey={[field.fieldKey, "originalPrice"]}
                          >
                            <InputNumber
                              min={0}
                              formatter={value => `${value}元`}
                              parser={value => value.replace('元', '')}
                            />
                          </Form.Item>
                        </Col>
                        <Col span={3}>
                          <Form.Item
                            label="售价"
                            name={[field.name, "sellingPrice"]}
                            fieldKey={[field.fieldKey, "sellingPrice"]}
                          >
                            <InputNumber
                              min={0}
                              formatter={value => `${value}元`}
                              parser={value => value.replace('元', '')}
                            />
                          </Form.Item>
                        </Col>
                        <Col span={4}>
                          <Form.Item
                            label="有效期"
                            name={[field.name, "periodValidity"]}
                            fieldKey={[field.fieldKey, "periodValidity"]}
                          >
                            <InputNumber style={{ width: '90px' }} suffix="天" />
                          </Form.Item>
                        </Col>
                        <Col flex="none" span={2}>
                          <Button icon={<CloseSquareFilled />} onClick={() => { remove(field.name) }}>
                            删除
                          </Button>
                        </Col>
                      </Row>
                    ))}
                    <Form.Item>
                      <Button
                        type="dashed"
                        onClick={() => {
                          add();
                        }}
                        style={{ width: "100%" }}
                      >
                        新增
                      </Button>
                    </Form.Item>
                  </div>
                );
              }}
            </Form.List>
          }
          {
            cardType == "3" && <Form.List name="settingPriceGradientDTOS">
              {(fields, { add, remove }) => {
                return (
                  <div>
                    {fields.map((field, index) => (
                      <Row key={field.key}>
                        <Col span={5}>
                          <Form.Item
                            label="期限天数"
                            name={[field.name, "durationDays"]}
                            fieldKey={[field.fieldKey, "durationDays"]}
                          >
                            <InputNumber
                              min={0}
                              formatter={value => `${value}天`}
                              parser={value => value.replace('天', '')}
                            />
                          </Form.Item>
                        </Col>
                        <Col span={5}>
                          <Form.Item
                            label="原价"
                            name={[field.name, "originalPrice"]}
                            fieldKey={[field.fieldKey, "originalPrice"]}
                          >
                            <InputNumber
                              min={0}
                              formatter={value => `${value}元`}
                              parser={value => value.replace('元', '')}
                            />
                          </Form.Item>
                        </Col>
                        <Col span={5}>
                          <Form.Item
                            label="售价"
                            name={[field.name, "sellingPrice"]}
                            fieldKey={[field.fieldKey, "sellingPrice"]}
                          >
                            <InputNumber
                              min={0}
                              formatter={value => `${value}元`}
                              parser={value => value.replace('元', '')}
                            />
                          </Form.Item>
                        </Col>
                        <Col flex="none" span={4}>
                          <Button icon={<CloseSquareFilled />} onClick={() => { remove(field.name) }}>
                            删除
                          </Button>
                        </Col>
                      </Row>
                    ))}
                    <Form.Item>
                      <Button
                        type="dashed"
                        onClick={() => {
                          add();
                        }}
                        style={{ width: "100%" }}
                      >
                        新增
                      </Button>
                    </Form.Item>
                  </div>
                );
              }}
            </Form.List>
          }
        </Card>
        <Card
          title="转让设置"
          style={{
            marginBottom: 24,
          }}
          bordered={false}
        >
          <FormItem
            {...formItemLayout}
            label="转让"
            name={['cardTransferSettingsDTO', 'isSupport']}
            rules={[
              {
                required: true,
                message: '请勾选是否支持转让',
              },
            ]}
          >
            <Radio.Group disabled={cardType === '4'}>
              <Radio value="0">
                支持
              </Radio>
              <Radio value="1">
                不支持
              </Radio>
            </Radio.Group>
          </FormItem>
          {/* <FormItem
            {...formItemLayout}
            label="手续费"
            name={['cardTransferSettingsDTO', 'poundage']}
          >
            <InputNumber
              min={0}
              style={{ width: '100%' }}
              formatter={value => `${value}元`}
              parser={value => value.replace('元', '')}
              disabled={cardType === '4'}
            />
          </FormItem> */}
        </Card>
        <Card
          title="高级设置"
          style={{
            marginBottom: 24,
          }}
          bordered={false}
          extra={
            !setting ?
              <Tooltip placement="top" title="展开">
                <DownSquareFilled onClick={() => toggle()} />
              </Tooltip>
              :
              <Tooltip placement="top" title="收起">
                <UpSquareFilled onClick={() => toggle()} />
              </Tooltip>}
        >
          {
            setting ?
              <>
                {/* <FormItem
                  {...formItemLayout}
                  label="展示排序"
                  name={['cardSuperSettingsDTO', 'showSort']}
                >
                  <InputNumber
                    min={0}
                    style={{ width: '100%' }}
                  />
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="在线购买"
                  name={['cardSuperSettingsDTO', 'isOnlinePurchase']}
                >
                  <Radio.Group>
                    <Radio value="1">
                      支持
                    </Radio>
                    <Radio value="2">
                      不支持
                    </Radio>
                  </Radio.Group>
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="每名会员最多购买"
                  name={['cardSuperSettingsDTO', 'mostBuyNum']}
                >
                  <InputNumber
                    min={0}
                    style={{ width: '100%' }}
                    formatter={value => `${value}次`}
                    parser={value => value.replace('次', '')}
                  />
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="单次可约人数上限"
                  name={['cardSuperSettingsDTO', 'singleBookingCourseUpper']}
                >
                  <InputNumber
                    min={0}
                    style={{ width: '100%' }}
                    formatter={value => `${value}人`}
                    parser={value => value.replace('人', '')}
                  />
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="每周可约团课次数上限"
                  name={['cardSuperSettingsDTO', 'weekBookingCourseUpper']}
                >
                  <InputNumber
                    min={0}
                    style={{ width: '100%' }}
                    formatter={value => `${value}次`}
                    parser={value => value.replace('次', '')}
                  />
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="每日可约次数上限"
                  name={['cardSuperSettingsDTO', 'monthBookingCourseUpper']}
                >
                  <InputNumber
                    min={0}
                    style={{ width: '100%' }}
                    formatter={value => `${value}次`}
                    parser={value => value.replace('次', '')}
                  />
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="每日可上团课上限"
                  name={['cardSuperSettingsDTO', 'dayTeamClassUpper']}
                >
                  <InputNumber
                    min={0}
                    style={{ width: '100%' }}
                    formatter={value => `${value}次`}
                    parser={value => value.replace('次', '')}
                  />
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="允许已预约未签到次数"
                  name={['cardSuperSettingsDTO', 'allowMakeNoSignNum']}
                >
                  <InputNumber
                    min={0}
                    style={{ width: '100%' }}
                    formatter={value => `${value}次`}
                    parser={value => value.replace('次', '')}
                  />
                </FormItem> */}
                <FormItem
                  {...formItemLayout}
                  label="从第一节课算开卡"
                  name={['cardSuperSettingsDTO', 'isFirstClassOpenCard']}
                >
                  <Radio.Group>
                    <Radio value="1">
                      是
                    </Radio>
                    <Radio value="2">
                      否
                    </Radio>
                  </Radio.Group>
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="设置为体验卡"
                  name={['cardSuperSettingsDTO', 'isExperienceCard']}
                >
                  <Radio.Group>
                    <Radio value="1">
                      是
                    </Radio>
                    <Radio value="2">
                      否
                    </Radio>
                  </Radio.Group>
                </FormItem>
                {/* <FormItem
                  {...formItemLayout}
                  label="会员卡背景"
                  name={['cardSuperSettingsDTO', 'bgPictureUrl']}
                >
                  <Radio.Group bordered={false}>
                    {
                      imgs.map((value, index) => <Radio.Button key={index} value={value}><Avatar shape="square" src={value} /></Radio.Button>)
                    }
                  </Radio.Group>
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="备注"
                  name={['cardSuperSettingsDTO', 'comments']}
                >
                  <TextArea rows={4} placeholder="请输入" />
                </FormItem> */}
              </>
              : <></>
          }
        </Card>
        <Card
          title="设置支持的私教排班"
          style={{
            marginBottom: 24,
          }}
          bordered={false}
          extra={
            !singlePlan ?
              <Tooltip placement="top" title="展开">
                <DownSquareFilled onClick={() => toggleSinglePlan()} />
              </Tooltip>
              :
              <Tooltip placement="top" title="收起">
                <UpSquareFilled onClick={() => toggleSinglePlan()} />
              </Tooltip>}
        >
          {
            !singlePlan ?
              <>
                <SearchForm courseType={3} search={(courseType, values) => _search(courseType, values)} />
                <Table
                  rowKey="courseId"
                  size="small"
                  pagination={false}
                  columns={privateClasscolumns}
                  dataSource={vipCard.privateClassCoursesSupportedCardVOS}
                  rowSelection={{
                    selectedRowKeys: privateClassKeys,
                    onSelect: (record, selected) => {
                      selectCoursesSupportedCardDTOS(record, selected)
                    },
                    onChange: (selectedRowKeys, selectedRows) => {
                      changeCoursesSupportedCardDTOS(selectedRowKeys, 'private')
                    }
                  }}
                />
              </>
              :
              <></>
          }
        </Card>
        <Card
          title="设置支持的大班课程"
          style={{
            marginBottom: 24,
          }}
          bordered={false}
          extra={
            !groupPlan ?
              <Tooltip placement="top" title="展开">
                <DownSquareFilled onClick={() => toggleGroupPlan()} />
              </Tooltip>
              :
              <Tooltip placement="top" title="收起">
                <UpSquareFilled onClick={() => toggleGroupPlan()} />
              </Tooltip>
          }
        >
          {
            !groupPlan ?
              <>
                <SearchForm courseType={2} search={(courseType, values) => _search(courseType, values)} />
                <Table
                  rowKey="courseId"
                  size="small"
                  pagination={false}
                  columns={bigClasscolumns}
                  dataSource={vipCard.manyClassCoursesSupportedCardVOS}
                  rowSelection={{
                    selectedRowKeys: bigClassKeys,
                    onSelect: (record, selected) => {
                      selectCoursesSupportedCardDTOS(record, selected)
                    },
                    onChange: (selectedRowKeys, selectedRows) => {
                      changeCoursesSupportedCardDTOS(selectedRowKeys, 'big')
                    }
                  }}
                />
              </>
              :
              <></>
          }
        </Card>
        <Card
          title="设置支持的小班课程"
          style={{
            marginBottom: 24,
          }}
          bordered={false}
          extra={
            !smallGroupPlan ?
              <Tooltip placement="top" title="展开">
                <DownSquareFilled onClick={() => toggleSmallGroupPlan()} />
              </Tooltip>
              :
              <Tooltip placement="top" title="收起">
                <UpSquareFilled onClick={() => toggleSmallGroupPlan()} />
              </Tooltip>
          }
        >
          {
            !smallGroupPlan ?
              <>
                <SearchForm courseType={1} search={(courseType, values) => _search(courseType, values)} />
                <Table
                  rowKey="courseId"
                  size="small"
                  pagination={false}
                  columns={smallClasscolumns}
                  dataSource={vipCard.smallClassCoursesSupportedCardVOS}
                  rowSelection={{
                    selectedRowKeys: smallClassKeys,
                    onSelect: (record, selected) => {
                      selectCoursesSupportedCardDTOS(record, selected)
                    },
                    onChange: (selectedRowKeys, selectedRows) => {
                      changeCoursesSupportedCardDTOS(selectedRowKeys, 'small')
                    }
                  }}
                />
              </>
              :
              <></>
          }
        </Card>
        <Card
          title="设置支持的器械课程"
          style={{
            marginBottom: 24,
          }}
          bordered={false}
          extra={
            !equipmentGroupPlan ?
              <Tooltip placement="top" title="展开">
                <DownSquareFilled onClick={() => toggleEquipmentGroupPlan()} />
              </Tooltip>
              :
              <Tooltip placement="top" title="收起">
                <UpSquareFilled onClick={() => toggleEquipmentGroupPlan()} />
              </Tooltip>
          }
        >
          {
            !equipmentGroupPlan ?
              <>
                <SearchForm courseType={1} search={(courseType, values) => _search(courseType, values)} />
                <Table
                  rowKey="courseId"
                  size="small"
                  pagination={false}
                  columns={equipmentClasscolumns}
                  dataSource={vipCard.equipmentClassCoursesSupportedCardVOS}
                  rowSelection={{
                    selectedRowKeys: equipmentClassKeys,
                    onSelect: (record, selected) => {
                      selectCoursesSupportedCardDTOS(record, selected)
                    },
                    onChange: (selectedRowKeys, selectedRows) => {
                      changeCoursesSupportedCardDTOS(selectedRowKeys, 'equipment')
                    }
                  }}
                />
              </>
              :
              <></>
          }
        </Card>
        <Affix offsetBottom={10}>
          <Button type="primary" onClick={onFinish} loading={submitting}>
            提交
          </Button>
          <Button
            style={{
              marginLeft: 8,
            }}
            onClick={() => window.history.back()}
          >
            返回
          </Button>
        </Affix>
      </Form>
    </PageHeaderWrapper>
  );
};

export default connect(({ loading, cubeVipCard }) => ({
  submitting: loading.effects['cubeVipCard/add'],
  shopOptionList: cubeVipCard.shopOptionList,
  vipCard: cubeVipCard.vipCard,
  cloneVipCard: cubeVipCard.cloneVipCard,
}))(BasicForm);
